<template>
	<div class="rebate-ratio">
		<nut-table :columns="columns" :bordered="false" :data="data"></nut-table>
	</div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { NetPacket } from "@/netBase/NetPacket";
import PKwebsocket from "@/lolo/Ws";

const tabValue = defineModel('tabValue', { required: true, default: '1' });

// 返佣比例
const columns = [
	{
		title: '游戏',
		key: 'gameName',
		align: 'center',
	},
	{
		title: '返佣比例',
		key: 'record',
		align: 'center',
	},
];

const data = ref([
	{
		gameName: '电子',
		record: '0.15%',
	},
	{
		gameName: '视讯',
		record: '0.15%',
	},
	{
		gameName: '体育',
		record: '0.15%',
	},
]);

const getRebateRatio = async () => {
	// @ts-ignore
	const req = NetPacket.req_agent_return_ratio();

	PKwebsocket.instance.send(req, true, {
		callbackName: 'msg_notify_agent_return_ratio',
		callback: getRebateRatioHandle,
	});
};

const getRebateRatioHandle = (data: any) => {
	console.log('获取返佣比例 ===>', data);
};



watch(tabValue, (value) => {
	if (value === '6') {
		getRebateRatio();
	}
}, { immediate: true });
</script>

<style lang="scss" scoped>

.rebate-ratio {
	border-radius: 8px;
    overflow: hidden;

	:deep() {
		.nut-table {
		}
		.nut-table__main__head {
			background: #394eff;
		}
		.nut-table__main__head__tr {
			display: flex;
		}
		.nut-table__main__head__tr__th,
		.nut-table__main__body__tr__th,
		.nut-table__main__body__tr__td {
			height: 44px;
			width: 50%;
			color: #fff;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			padding: 0;
			margin: 0;
		}

		.nut-table__main__body {
			.nut-table__main__body__tr {
				background: #242352;
			}
			.nut-table__main__body__tr:nth-of-type(2n) {
				background: #1b1a44;
			}
		}
	}
}
</style>
